<template>
  <div style="width: 580px;height: 499px;margin: -40px 0px -10px -10px;background-color: #ccc;">
    <div style="width: 560px;height: 480px;float: left;background-color: #fff;margin: 10px 0px 0px 10px;">
      <el-card class="box-card">
        <el-row>
          <el-col :span="7">
            <el-card :body-style="{ padding: '2px' }" style="width: 126px;height: 126px;" >
              <img :src="collectPoint.pic" class="image" style="width: 120px;height: 120px;">
            </el-card>
          </el-col>
          <el-col :span="17">

            <div style="padding: 5px;font-size: 18px;font-weight: bold;">
              {{collectPoint.name}}
            </div>
            <div style="padding: 5px;">
              <span>数据时间：{{realDataObj['collecTimes']}}</span>
            </div>
            <div style="padding: 5px;">
              状态：
              <span v-if="realDataObj['network'] === 'OnLine'" style="color: #13ce66">在线</span>
              <span v-else-if="realDataObj['network'] === 'F'" style="color: #C90000">故障</span>
              <span v-else style="color: #8c939d;">离线</span>
            </div>
            <div style="padding: 5px;">
              <span>备注：{{collectPoint.remark}}</span>
            </div>

          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div style="height: 280px;">
          <el-scrollbar style="height: 100%;">
            <el-row>
              <el-col v-for="pointParam in realDataObj['pointParams']" :key="pointParam.index" :span="12">
                <span v-if="pointParam.paramInfo.paramType=='num'">
                  <el-card class="box-card">
                    {{pointParam.paramInfo.name}}：<span v-html="realDataObj[`param${(pointParam.paramId)}`]"></span> ({{pointParam.paramInfo.unit}})
                  </el-card>
                </span>
              </el-col>
              <el-col v-for="pointParam in realDataObj['pointParams']" :key="pointParam.index" :span="12">
                <span v-if="pointParam.paramInfo.paramType=='state'">
                  <el-card class="box-card">
                    {{pointParam.paramInfo.name}}：{{realDataObj[`param${(pointParam.paramId)}`]}}
                  </el-card>
                </span>
              </el-col>
              <el-col v-for="pointParam in realDataObj['pointParams']" :key="pointParam.index" :span="12">
                <span v-if="pointParam.paramInfo.paramType=='fault' && realDataObj[`param${(pointParam.paramId)}`]">
                  <el-card class="box-card">
                    {{pointParam.paramInfo.name}}：<span v-html="realDataObj[`param${(pointParam.paramId)}`]"></span>
                  </el-card>
                </span>
              </el-col>
            </el-row>
          </el-scrollbar>
        </div>

      </el-card>

    </div>

  </div>
</template>

<script>
  import { queryRealData } from "@/api/basic/hisMain";

  export default {
    name:'PointDetail',
    props: {
      collectPoint: {
        type: Object
      }
    },
    data() {
      return {
        realDataObj:{},
        queryParams: {
          pointId: this.collectPoint.id
        },
      };
    },
    watch:{
      collectPoint(val) {
        this.queryParams.pointId = this.collectPoint.id;
        this.getRealData();
      }
    },
    created() {
      this.getRealData();
    },
    methods: {
      getRealData(){
        queryRealData(this.queryParams).then(response => {
          this.realDataObj = response.data;
        });
      },

    }
  };
</script>
<style scoped lang="scss">
  .box-card ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
</style>

